<!-- 我的查询 -->

<template>
  <WebSearch>
    <template #btn>
      <BtnPrimary title="同步" icon="el-icon-refresh" @click="toSync" />
      <BtnDownload @click="startDownload" />
      <BtnDefault title="批量处理" @click="openMulti" />
    </template>

    <ParamCheckbox bind="statusArray" :dict="GETTER.STATUS" hasRight />
    <ParamInput label="设备编号 / 设备名称" bind="keyword" />
    <ParamSelect
      label="设备类别"
      bind="deviceCategoryId"
      :dict="categoryDict"
      @change="param.deviceTypeId = ''"
      narrow
    />
    <ParamSelect label="设备类型" bind="deviceTypeId" :dict="typeDict" narrow />
  </WebSearch>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'MySearch',

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [
    CORE.mixWeb(),
    CORE.mixLoad(),
    CORE.mixWeb('multi', 'multi_'),
  ],

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 类别键名
     */
    categoryKey: () => 'deviceCategoryId',

    /**
     * 设备类别字典
     */
    categoryDict() {
      return this.$root.iot_category_selectDict
    },

    /**
     * 设备类型字典
     */
    typeDict() {
      const { param, categoryKey, $root: { iot_type_selectDict: typeDict } } = this
      return typeDict.filter((dict) => dict[3] === param[categoryKey]) || []
    },
  },

  /**
   * 监听属性 (深度 deep 首次 immediate)
   */
  watch: {
    /**
     * 监听提交就绪
     */
    readySubmit(ready) {
      ready && this.toComplete()
    },

    /**
     * 监听批量修改就绪
     */
    multi_readyEdit(ready) {
      ready && this.refreshList()
    },
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 点击同步
     */
    toSync() {
      const h = this.$createElement
      let updateAble = 2

      const checkbox = {
        key: Date.now(),
        on: { change: (value) => (updateAble = value ? 1 : 2) },
      }
      const message = h('div', null, [
        h('div', { class: 'IOTList-MySearch-sync-msg' }, '确定进行设备同步吗？'),
        h('el-checkbox', checkbox, '已导入设备更新属性'),
      ])
      const config = {
        title: '设备同步',
        type: 'warning',
        customClass: 'IOTList-MySearch-sync',
        message,
        showCancelButton: true,
      }
      const success = () => {
        this.setOne({ updateAble })
        this.startSubmit()
      }
      const error = () => null

      this.$msgbox(config).then(success).catch(error)
    },

    /**
     * 同步完成
     */
    toComplete() {
      const { addNum, editNum } = this.one
      const msg = `新增数量：${addNum} 个， 修改数量：${editNum} 个`
      CORE.ALERT.success(msg, '同步完成')
    },

    /**
     * 打开批量弹窗
     */
    openMulti() {
      const { param, multi_openEdit } = this

      if (!param.idList.length) {
        CORE.MSG.warning('请选择设备')
        return
      }

      multi_openEdit({
        idList: param.idList, // 设备 ID 列表
        rowList: param.rowListList, // 设备列表
      })
    },

    /**
     * 刷新列表
     */
    refreshList() {
      this.param.idList = this.param.rowList = [] // 清空多选
      this.startList(1)
    },
  },
}
</script>

<style lang="scss">
@import './index.scss';
</style>
